<template>
    <el-table
        :data="salesMen"
        style="width: 100%"
        :row-class-name="tableRowClassName"
    >
        <el-table-column prop="_id" label="销售员编号"></el-table-column>
        <el-table-column
            style="
                > div {
                    margin: 0 auto;
                }
            "
            label="销售员姓名"
        >
            <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                    <p>销售员编号: {{ scope.row._id }}</p>
                    <p>销售员性别:{{ scope.row.gender }}</p>

                    <span
                        >销售员头像 :<img
                            style="vertical-align: middle"
                            width="60px"
                            :src="
                                'http://localhost:3000/images/' +
                                scope.row.images
                            "
                        />
                    </span>
                    <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.name }}</el-tag>
                    </div>
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column prop="age" label="销售员年龄"></el-table-column>
        <el-table-column prop="gender" label="销售员性别"></el-table-column>

        <el-table-column prop="images" label="销售员头像">
            <template slot-scope="scope">
                <!-- <span>{{ scope.row.images }}</span> -->
                <el-image
                    style="width: 80px; height: 80px"
                    :src="'http://localhost:3000/images/' + scope.row.images"
                >
                </el-image>
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
                <el-button
                    @click="
                        $router.push(
                            '/adminsSystem/salesMenUpdate/' + scope.row._id
                        )
                    "
                    type="text"
                    size="small"
                    >修改</el-button
                >
                <el-button
                    @click="delSalesMen(scope.row._id)"
                    type="text"
                    size="small"
                    >删除</el-button
                >
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
import { createNamespacedHelpers } from "vuex";

const { mapActions, mapState } = createNamespacedHelpers("salesMen");
export default {
    created() {
        this.getSalesMen();
    },
    computed: {
        ...mapState(["salesMen"]),
    },

    methods: {
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex === 1) {
                return "warning-row";
            } else if (rowIndex === 3) {
                return "success-row";
            }
            return "";
        },
        ...mapActions(["getSalesMen", "delSalesMen"]),
    },
};
</script>

<style>
.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
}
</style>
